<template>
  <!-- 修改居民 -->
  <div class="main">
    <div class="select">
      <el-row class="pt">基本信息</el-row>
      <div class="buttom">
        <el-button @click="back">返回</el-button>
        <el-button @click="submit" type="primary" v-if="pageType == 'edit'">提交</el-button>
      </div>
      <el-row>
        <el-col :span="6">
          <div>
            <el-form ref="editform" :model="editform" label-width="80px">
              <el-form-item label="姓名:">
                <el-input v-model="editform.userName"></el-input> </el-form-item
            ></el-form>
          </div>
        </el-col>
        <el-col :span="6" :offset="3">
          <div>
            <el-form ref="editform" label-width="80px">
              <el-form-item label="证件类型:">
                <el-select filterable v-model="editform.identifyType" placeholder="请选择">
                  <el-option
                    v-for="item in identifyTypelist"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select> </el-form-item
            ></el-form>
          </div>
        </el-col>
        <el-col :span="6" :offset="3">
          <div>
            <el-form ref="editform" :model="editform" label-width="80px">
              <el-form-item label="证件号码:">
                <el-input
                  v-model="editform.identifyNo"
                ></el-input> </el-form-item
            ></el-form>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form ref="editform" label-width="80px">
            <el-form-item label="居住地址:">
              <el-select filterable v-model="addressvalue" placeholder="请选择">
                <el-option
                  v-for="item in addresslist"
                  :key="item.lable"
                  :label="item.label"
                  :value="item.lable"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-form>
        </el-col>
        <el-col :span="6" :offset="3">
          <div>
            <el-form ref="editform" :model="editform" label-width="80px">
              <el-form-item label="手机号码:">
                <el-input
                  v-model="editform.phoneNumber"
                ></el-input> </el-form-item
            ></el-form>
          </div>
        </el-col>
        <el-col :span="6" :offset="3">
          <el-form ref="editform"  label-width="80px">
            <el-form-item label="是否注册:">
              <el-select filterable v-model="registeredvalue" placeholder="请选择">
                <el-option
                  v-for="item in registeredlist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-form>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <div class="content-title">
        <span>家庭成员 </span>
        <span> </span>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="userName" label="姓名" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.userName"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="identifyType" label="证件类型" width="180">
          <template slot-scope="scope">
            <el-select filterable v-model="scope.row.identifyType" placeholder="请选择">
              <el-option
                v-for="item in identifyTypelist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="identifyNo" label="证件号码">
          <template slot-scope="scope">
            <el-input v-model="scope.row.identifyNo"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="居住地址">
          <template slot-scope="scope">
            <el-input v-model="scope.row.address"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="phoneNumber" label="手机号码">
          <template slot-scope="scope">
            <el-input v-model="scope.row.phoneNumber"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="edits" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="Delete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <Pagination
          :total="page_total"
          @pageChange="pageChange"
          :page="page"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "editresident",
  data() {
    return {
      registeredlist: [
        { value: 1, label: "是" },
        { value: 2, label: "否" },
      ],
      registeredvalue: null,
      addresslist: [],
      addressvalue: null,
      identifyTypelist: [
        { value: 1, label: "身份证" },
        { value: 2, label: "护照" },
        { value: 3, label: "港澳通行证" },
        { value: 4, label: "台胞证" },
        { value: 5, label: "士官证" },
        { value: 6, label: "学生证" },
        { value: 7, label: "其他证件" },
      ],
      identifyTypevalue: null,
      identifyTypetablevalue: null,
      page: {
        page_index: 1,
        page_limit: 10,
      },
      page_total: 20, //总条数
      value: "",
      editform: {},
      tableData: [
      ],
    };
  },
  created() {
    this.pageType = this.$route.query.type;
    this.editform = JSON.parse(this.$route.query.info);
    console.log(this.editform, 2222);
    this.identifyTypevalue = this.editform.identifyType;
    this.registeredvalue = this.editform.registered;
    this.addresslist.push({ lable: this.editform.address });
    this.addressvalue = this.editform.address;
    this.initpage();
  },
  mounted() {},
  methods: {
    // 获取家庭列表
    async initpage() {
      let params = {
        id: this.editform.id,
        familyId: this.editform.familyId,
      };
      console.log(params,99999);
      let { data } = await this.$ajax.lu.getFamilylist(params);
      console.log(data);
      // this.page_total = data.total;
      this.tableData = data;
      this.identifyTypetablevalue = data.notRegistedNum;
    },
    pageChange(item) {
      this.page.page_index = item.page_index;
      this.page.page_limit = item.page_limit;
      this.init(); //改变页码，重新渲染页面
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
  async Delete(index, row) {
      var params = new FormData();
      params.append("id", row.id);
      console.log(params,9999999,index, row);
      let { code } = await this.$ajax.lu.delInhabitInfo(params);
      console.log(code);
      this.tableData.splice(index, 1);
    },
    back() {
      this.$router.push({
        name: "addresident",
      });
    },
  async  submit() {
    console.log(this.tableData,this.editform,88888888);
    const list = [...this.tableData,this.editform]
      let { data } = await this.$ajax.lu.batchModifyInhabit(list);
      console.log(data);
      console.log()
      this.$router.push({
        name: "addresident",
      });
    },

    addinfo() {
      // this.$router.push({name: 'editbuilding'});
    },
    reset() {
      this.form = [];
    },
  },
};
</script>

<style scoped>
.main {
  padding: 10px;
}
.nameinfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* align-item center */
}
.title-span {
  color: red;
  padding-left: 20px;
}
.buttom {
  padding: 10px 0 20px 0;
  /* width: 500px; */
  text-align: right;
}
.select {
  padding: 15px 64px 0px;
}
.nameinfo2 {
  display: flex;
  align-items: center;
}
.content {
  padding: 95px 54px 0px;
}
.pt {
  padding-bottom: 10px;
}
.content-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 40px;
}
.block {
  padding-top: 20px;
  text-align: right;
}
</style>
